<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>侦听器-侦听对象内容变化失败</title>
  <script src="vue.js"></script>
</head>
<body>
  <p id="app">{{position2}}</p>
  <script>
    let circle = {
        position: {
          x:0, y:0
        },
        radius: 10
      };
    let vm = new Vue({
      el:"#app",
      data: circle,
      watch: {
        position(newValue) {
            console.log(`在watch中侦听到：
            位置变化到了(${newValue.x},${newValue.y})`);
        }
      },
      computed:{
        position2(){
           console.log(`计算属性被触发更新：
           位置变化到了(${this.position.x},${this.position.y})`);
           return {x: this.position.x+1, y:this.position.y+1}
        }}
    });
    vm.position.x = 3;
  </script>
</body>
</html>
